<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>幸运大转盘</title>

    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <style>
        * {
            /* 重置默认样式 */

            margin: 0;

            padding: 0;

            border: none;

            outline: none;

            user-select: none;

        }

        .wrapper {

            position: relative;

            height: 200px;

            width: 200px;

            padding: 20px;

            /* margin: 400px 20px 20px 20px; */

            background-color: #ff5555;

            box-shadow: #000000 0px 0px 10px;

            border-radius: 50%;

            margin: 200px auto;

        }

        .light {

            position: absolute;

            height: 10px;

            width: 10px;

            border-radius: 50%;

            top: 5px;

            left: 115px;

            transform-origin: 5px 115px;

        }

        .light-twinkling {

            animation: 1s twinkling 3, 100ms 3s twinkling 3;

        }

        .light:nth-child(2n) {

            background-color: #fafce7;

        }

        .light:nth-child(2n+1) {

            background-color: #ffe58b;

        }

        .light:nth-child(2) {

            transform: rotate(36deg);

        }

        .light:nth-child(3) {

            transform: rotate(72deg);

        }

        .light:nth-child(4) {

            transform: rotate(108deg);

        }

        .light:nth-child(5) {

            transform: rotate(144deg);

        }

        .light:nth-child(6) {

            transform: rotate(180deg);

        }

        .light:nth-child(7) {

            transform: rotate(216deg);

        }

        .light:nth-child(8) {

            transform: rotate(252deg);

        }

        .light:nth-child(9) {

            transform: rotate(288deg);

        }

        .light:nth-child(10) {

            transform: rotate(324deg);

        }

        .panel {

            position: relative;

            height: 200px;

            width: 200px;

            background-color: #b7b7b7;

            border-radius: 100px;

        }

        .sector {

            position: absolute;

            left: 100px;

            top: 0px;

            width: 100px;

            height: 200px;

            font-size: 14px;

            border-radius: 0px 100px 100px 0;

            overflow: hidden;

            transform-origin: left center;

        }

        .sector:nth-child(1) {

            transform: rotate(-18deg);

        }

        .sector:nth-child(2) {

            transform: rotate(18deg);

        }

        .sector:nth-child(3) {

            transform: rotate(54deg);

        }

        .sector:nth-child(4) {

            transform: rotate(90deg);

        }

        .sector:nth-child(5) {

            transform: rotate(126deg);

        }

        .sector:nth-child(6) {

            transform: rotate(162deg);

        }

        .sector:nth-child(7) {

            transform: rotate(198deg);

        }

        .sector:nth-child(8) {

            transform: rotate(234deg);

        }

        .sector:nth-child(9) {

            transform: rotate(270deg);

        }

        .sector:nth-child(10) {

            transform: rotate(306deg);

        }

        .sector:nth-child(2n+1) .sector-inner {

            background: #fef6e0;

        }

        .sector:nth-child(2n) .sector-inner {

            background: #ffffff;

        }

        .sector-inner {

            text-align: center;

            display: block;

            width: 40px;

            padding: 5px 3px 0 57px;

            height: 195px;

            transform: translateX(-100px) rotate(36deg);

            transform-origin: right center;

            border-radius: 100px 0 0 100px;

        }

        .sector-inner span {

            display: block;

            transform-origin: center;

            transform: rotate(-19deg);

            color: #d46854;

        }

        .pointer {

            position: absolute;

            left: 79px;

            top: 79px;

            z-index: 10;

            height: 30px;

            width: 30px;

            padding: 6px;

            color: #ff5555;

            line-height: 15px;

            font-size: 12px;

            text-align: center;

            background-color: #FE4848;

            border-radius: 50%;

            border: 1px solid #FE4848;

            transition: transform 3s cubic-bezier(.2, .93, .43, 1);

        }

        .pointer::after {

            content: '';

            position: absolute;

            left: 14px;

            top: -24px;

            border-width: 12px 6px;

            border-style: solid;

            border-color: transparent;

            border-bottom-color: #FE4848;

            transform-origin: center;

        }

        .result {
            margin-left: 680px;
        }

        .pointer2-box {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 120px;
        }

        .pointer2 {
            width: 160px;
            height: 60px;
            font-size: 24px;
            line-height: 60px;
            text-align: center;
            background-color: #F56C6C;
            color: white;
        }

        @keyframes twinkling {

            50% {
                background: transparent;
            }

        }

        /* 弹窗 */
        /* 弹窗背景 */
        .modal {
            display: none;
            /* 默认隐藏 */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        /* 弹窗内容区域 */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        /* 关闭按钮 */
        /* .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        } */
        .word {
            margin: 20px 0;
        }
        .confirm {
            text-align: center;
            padding: 10px 50px;
            background-color: #409EFF;
            color: white;
        }
    </style>

</head>

<body>

    <div class="wrapper">

        <div class="light"></div>

        <div class="light"></div>

        <div class="light"></div>

        <div class="light"></div>

        <div class="light"></div>

        <div class="light"></div>

        <div class="light"></div>

        <div class="light"></div>

        <div class="light"></div>

        <div class="light"></div>

        <div class="panel">

            <div class="sector">

                <div class="sector-inner">

                    <span>顺心顺意</span>

                </div>

            </div>

            <div class="sector">

                <div class="sector-inner">

                    <span>身体健康</span>

                </div>

            </div>

            <div class="sector">

                <div class="sector-inner">

                    <span>超大满贯</span>

                </div>

            </div>

            <div class="sector">

                <div class="sector-inner">

                    <span>福如东海</span>

                </div>

            </div>

            <div class="sector">

                <div class="sector-inner">

                    <span>四季平安</span>

                </div>

            </div>

            <div class="sector">

                <div class="sector-inner">

                    <span>吉星高照</span>

                </div>

            </div>

            <div class="sector">

                <div class="sector-inner">

                    <span>身体健康</span>

                </div>

            </div>

            <div class="sector">

                <div class="sector-inner">

                    <span>福如东海</span>

                </div>

            </div>

            <div class="sector">

                <div class="sector-inner">

                    <span>母仪天下</span>

                </div>
            </div>
            <div class="sector">
                <div class="sector-inner">
                    <span>五福临门</span>
                </div>
            </div>
            <div class="pointer">开始抽奖</div>
        </div>
        <div class="pointer2-box">
            <div class="pointer2">开始抽奖</div>
        </div>
    </div>
    <!-- <div class="result"></div> -->
    <!-- 弹窗 -->
    <div class="modal">
        <div class="modal-content">
            <!-- <span class="close">&times;</span> -->
            <h2>恭喜您中奖啦！</h2>
            <p class="word">恭喜您获得价值100.00元的现金礼包！</p>
            <div class="confirm">确定</div>
        </div>
    </div>
</body>
<script>
    let rewardIndex = 0;
    const array = [
        
    ]
    let rewardArray = [
        '恭喜您获得66.66元现金红包！',
        '哪位妈妈年轻时不是一个漂亮的小姑娘呢？但是后来，她有了自己的孩子，有了自己的生活。所以她只好握起了长剑，成为了英雄。',
        '恭喜您获得100.00元现金红包！',
        '幸福大概就是，我还小，您未老。您陪我长大，我陪您到老。',
        '过去您陪我蹒跚学步，未来我陪您夕阳漫步。',
        '恭喜您获得188.88元现金红包！',
        '羡慕我爸，泡到了世界上最好的女人。',
        '恭喜您获得520.00元的超级爱心大红包！',
        '妈，母亲节快乐！今年我用一种不一样的方式给您送上祝福。这是我今年正式工作的第一年，也是我的工作日常，通过代码实现网页呈现给大家。一直都想直观地给您跟爸展示我的工作日常，这次我想是一次很好的机会。在这里，厚澄祝妈母亲节快乐，早日战胜病魔，我们与您同在！只要您有信心，我相信一切会好起来！'
    ]
    let getEle = document.getElementsByClassName.bind(document);
    let rewardWord = getEle('word')[0]
    let pointer = getEle('pointer')[0];
    // let result = getEle('result')[0];
    let lights = Array.prototype.slice.call(getEle('light'));
    const modal = getEle('modal')[0]
    let onRotation = false; // 记录当前是否正在旋转，如果正在旋转，就不能继续点击了
    let reward = ['旺仔牛奶', '奶茶', '薯片', '棒棒糖', '雪糕',
        '糖葫芦', '辣条', '特等奖', '再来一次', '谢谢惠顾'];
    // 根据随机角度获取奖励
    let getReward = (function () {
        currentDeg = 0;
        return function () {
            // 转三圈到四圈
            let id = Math.random() //这里是中奖ID 可以通过接口返回 取值为0.1 - 10 返回值需要做处理  例：返回3则处理为 id = 3 / 10
            let rotateDeg = id * 360 + 1080;
            currentDeg += rotateDeg;
            let rewardText = reward[Math.floor((currentDeg + 18) % 360 / 36)]
            return {
                deg: currentDeg,
                text: rewardText === '谢谢参与' ? '很遗憾，您没有获得奖品。' : '恭喜获得: ' + rewardText
            }
        }
    })();
    
    pointer.addEventListener('click', () => {
        if (onRotation) return;
        console.log('开始抽奖');
        onRotation = true;
        lights.forEach(light => { light.className += ' light-twinkling'; });
        let nextStatus = getReward();
        console.log(nextStatus)
        rewardWord.innerText = rewardArray[rewardIndex]
        // result.innerText = nextStatus.text;
        // result.style.display = 'none';
        pointer.style.transform = `rotateZ(${nextStatus.deg}deg)`;
    })
    pointer.addEventListener('transitionend', () => {
        console.log('抽奖结束');
        setTimeout(() => { // 等闪烁五下结束
            onRotation = false;
            lights.forEach(light => { light.className = 'light'; });
            modal.style.display = 'block'
            rewardIndex++
            // result.style.display = 'block';
        }, 500);
        // 这里每100毫秒为闪烁一次
    })

    const pointer2 = getEle('pointer2')[0]
    pointer2.addEventListener('click', () => {
        if (onRotation) return;
        console.log('开始抽奖');
        onRotation = true;
        lights.forEach(light => { light.className += ' light-twinkling'; });
        let nextStatus = getReward();
        console.log(nextStatus)
        rewardWord.innerText = rewardArray[rewardIndex]
        // result.innerText = nextStatus.text;
        // result.style.display = 'none';
        pointer.style.transform = `rotateZ(${nextStatus.deg}deg)`;
    })
    pointer2.addEventListener('transitionend', () => {
        console.log('抽奖结束');
        setTimeout(() => { // 等闪烁五下结束
            onRotation = false;
            lights.forEach(light => { light.className = 'light'; });
            modal.style.display = 'block'
            rewardIndex++
            // result.style.display = 'block';
        }, 500);
        // 这里每100毫秒为闪烁一次
    })

    // 确定逻辑修改
    const confirm = getEle('confirm')[0]
    confirm.addEventListener('click', () => {
        if (rewardIndex <9) modal.style.display = 'none'
    })
</script>

</html>